<template>
	<view>
		<!-- 标题 -->
		<view class="title">
			房地产委托出售经纪合同
		</view>
		<!-- 委托人 -->
		<view class="name1 in1">
			<view class="txt">
				委托人（甲方）：
			</view>
			<view class="text">
				<input type="text" value="" placeholder="请输入" />
			</view>
		</view>
		<view class=" in1 name2 ">
			<view class="txt">
				受托人（乙方）：富同信息科技（上海）有限公司
			</view>
		</view>
		<!-- 内容 -->
		<view class="main in">
			<view class="text ">
				为明确双方权利义务，保障双方利益，在平等自愿和诚实信用的原则下，就甲方委托
			</view>
			<view class="text1">
				乙方代理出租房地产事宜达成如下协议：
				第一条 房地产基本信息（实际情况以该房地产权属证明或房地产登记薄记载内容为准）
			</view>
			<!-- 表格-->
			<u-table>
				<u-tr>
					<u-th width="100rpx">序号</u-th>
					<u-th width="200rpx">项目类别</u-th>
					<u-th>内容</u-th>
				</u-tr>
				<u-tr class="tr1">
					<u-td width="100rpx">1</u-td>
					<u-td width="200rpx">房地产坐落</u-td>
					<u-td>
						<view class="tab-box">上海市
							<input type="text" class="input-box" value="" style="width: 150rpx;" />区
							<input type="text" class="input-box" value="" style="width: 150rpx;" />路
							<input type="text" class="input-box" value="" style="width: 100rpx;" />弄
							<input type="text" class="input-box" value="" style="width: 100rpx;" />号
							<input type="text" class="input-box" value="" style="width: 90rpx;" />
							<view class="">
								室以及附属
							</view>
							<input type="text" class="input-box" value="" style="width: 85rpx;" />车位(以下简称"该房地
							<view class="">
								产"); 建筑面积
							</view>
							<input type="text" class="input-box" value="" style="width: 100rpx;" />m2
						</view>
					</u-td>
				</u-tr>
				<u-tr style="height: 80rpx;">
					<u-td width="100rpx">2</u-td>
					<u-td width="200rpx">房地产权力人</u-td>
					<u-td><input type="text" value="" placeholder="请输入" /></u-td>
				</u-tr>
				<u-tr style="height: 200rpx;">
					<u-td width="100rpx">3</u-td>
					<u-td width="200rpx">房屋类型 </u-td>
					<u-td>
						<u-radio-group v-model="value" @change="radioGroupChange">
							<u-radio shape="circle1" @change="radioChange" v-for="(item, index) in list" :key="index"
								:name="item.name" :disabled="item.disabled">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</u-td>
				</u-tr>
				<u-tr style="height: 150rpx;">
					<u-td width="100rpx">4</u-td>
					<u-td width="200rpx">产权证编号</u-td>
					<u-td>
						<view class="tab-box">
							<input type="text" class="input-box" value="" style="width: 150rpx;" />字 (
							<input type="text" class="input-box" value="" style="width: 100rpx;" /> ) 第
							<input type="text" class="input-box" value="" style="width: 100rpx;" />号
						</view>
					</u-td>
				</u-tr>
				<u-tr style="height: 250rpx;">
					<u-td width="100rpx">5</u-td>
					<u-td width="200rpx">抵押状况</u-td>
					<u-td>
						<view class="tab-box">
							<u-radio-group v-model="value1" @change="radioGroupChange">
								<u-radio shape="circle1" @change="radioChange" name="无">无 </u-radio>
								<u-radio shape="circle1" @change="radioChange" name="有"> 有 </u-radio>
								<view class="" style="line-height: 62rpx;">
									有，抵押权人
								</view>
							</u-radio-group>
							<u-radio-group v-model="value1" @change="radioGroupChange" style="line-height: 62rpx"> (
								<u-radio shape="circle1" @change="radioChange" name="无">个人 </u-radio>
								<u-radio shape="circle1" @change="radioChange" name="有">银行</u-radio>)
							</u-radio-group>
							贷款余额
							<input type="text" class="input-box" value="" style="width: 150rpx;line-height: 62rpx;" />
						</view>
					</u-td>
				</u-tr>
				<u-tr style="height: 300rpx;">
					<u-td width="100rpx">6</u-td>
					<u-td width="200rpx">租赁状况</u-td>
					<u-td>
						<view class="tab-box">
							租赁期限自
							<input type="text" class="input-box" value="" style="width: 100rpx;" />年
							<input type="text" class="input-box" value="" style="width: 80rpx;" />月
							<input type="text" class="input-box" value="" style="width: 80rpx;" />日至
							<input type="text" class="input-box" value="" style="width: 100rpx;" />年
							<input type="text" class="input-box" value="" style="width: 80rpx;" />月
							<input type="text" class="input-box" value="" style="width: 80rpx;" />
							<view>日止，月租金</view>未人民币
							<input type="text" class="input-box" value="" style="width: 150rpx;" />元整。
						</view>
					</u-td>
				</u-tr>
			</u-table>
			<!--  -->
			<view class="post ">
				<view class="">
					第二条 委托出租价格
				</view>
				<view class="tab-box">
					甲方委托乙方出租该房地产的转让价格为人民币<input type="text" class="input-box" value="" style="width: 150rpx;" />
					<view class="">
						元（大写 元整）,该价格为各付价。
					</view>
					<input type="text" class="input-box" value="" style="width: 150rpx;" />
					<view class="">
						（甲方到手价预估约为人民币
					</view>
					<input type="text" class="input-box" value="" style="width: 150rpx;" />
					<view class="">
						元整）
					</view>
				</view>
				<view class="">
					第三条 委托期限及委托代理方式
				</view>
				<view class="tab-box">
					 <view class="">
					 	1、限时出售代理（甲方指定乙方为唯一的房屋出售代
					 </view>
					 表 ,委托期限：自<input type="text" class="input-box" value="" style="width: 100rpx;" />年
					<input type="text" class="input-box" value="" style="width: 100rpx;" />月
					<input type="text" class="input-box" value="" style="width: 100rpx;" />日起至
					<input type="text" class="input-box" value="" style="width: 100rpx;" />年
					<input type="text" class="input-box" value="" style="width: 100rpx;" />月
					<input type="text" class="input-box" value="" style="width: 100rpx;" />日止
					<view >甲方将该房地产委托</view>给乙方出租，乙方同意先行向甲方支付限时出租唯一代
					<view>理保证金计人民币</view>
						
				
					<input type="text" class="input-box" value="" style="width: 150rpx;" />元（
					<input type="text" class="input-box" value="" style="width: 200rpx;" />
					<view>
						元整）。但因甲方之原因导致乙方在委托乙方在委托期
					</view>
					限内无法将该房地产成功出租的不视为乙方违约。如乙方在本协议约定的委托期限内将该房地产出租的，则甲方应在签订房地产租赁合同当日并向乙方支付服务费金额为房屋实际月租金50%；若逾期支付的，则按日支付滞纳金为实际成交月租金的万分之五。
					<view >
						2、为增加成交机会，甲方授权乙方到其他优秀的第三方转挂牌委托出售，合作成交。但甲方无需额外支付任何服务费用。
					</view>
					<view >
						3、悬赏：甲方为尽快将房地产租出，特向乙方作出如下悬赏承诺：
					</view>
						若乙方在 <input type="text" class="input-box" value="" style="width: 100rpx;" />年
						 <input type="text" class="input-box" value="" style="width: 100rpx;" />月
						  <input type="text" class="input-box" value="" style="width: 100rpx;" />日之前居间成功
						<view >
					出租该房地产，则甲方同意额外向乙方支付相当于房 
						</view>
						屋实际成交价租金的<input type="text" class="input-box" value="" style="width: 100rpx;" />%（不含居间服务费）
						<view>
							的悬赏金；悬赏金支付时间为签订房地产租赁合同当日；若乙方在此悬赏期内未能成功出租该房地产，则该悬赏条款自动失效。
						</view>
				</view>
				<view class="name1 in1">
					<view class="txt">
						甲方签章：
					</view>
					<view class="text">
						<input type="text" value="" placeholder="请输入" />
					</view>
				</view>
			</view>
			<view class="footer">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '住宅',
				list: [{
						name: '住宅',
						disabled: false
					},
					{
						name: '新式里弄',
						disabled: false
					},
					{
						name: '花园住宅',
						disabled: false
					},
					{
						name: '商铺',
						disabled: false
					},
					{
						name: '办公楼',
						disabled: false
					},
					{
						name: '其他',
						disabled: false
					}
				],
			};
		},
		methods: {
			radioGroupChange(e) {
				console.log(this.value);
			},
			radioChange(e) {
				console.log(e);
			}
		}
	}
</script>

<style lang="scss">
	.in {
		width: 90%;
		margin: auto;
	}

	.in1 {
		width: 95%;
		margin: auto;
	}

	.input-box {
		padding-left: 4rpx;
		border-bottom: 3rpx solid #999;
		// font-size: 24rpx;
	}

	.tab-box {
		display: flex;
		flex-wrap: wrap;
		line-height: 50rpx;
		padding-left: 10rpx;
	}

	.title {
		font-size: 40rpx;
		font-weight: 600;
		text-align: center;
	}

	.name1 {
		display: flex;

		.txt {
			margin-top: 20rpx;
		}

		.text {
			width: 60%;
			margin-top: 10rpx;
			line-height: 30rpx;

			input {
				height: 60rpx;
				border-bottom: 3rpx solid #999;
			}
		}
	}

	.name2 {
		margin-top: 10rpx;
	}

	.main {
			padding-bottom: 100rpx;
		.text {
			margin-top: 20rpx;
			text-indent: 2em
		}

		.text1 {
			margin-top: 20rpx;
			line-height: 40rpx;
		}

		.tr1 {
			height: 330rpx;
		}

		input {
			font-size: 28rpx;
		}

		.post {
			line-height: 50rpx;
		}
	}
	.footer{
		width: 320rpx;
		height: 80rpx;
		background-color: #71A4FF;
		margin: auto;
		border-radius: 50rpx;
		margin-top: 60rpx;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 80rpx;
		font-size: 550;
	}
</style>
